<template>
  <div class="homes">
    <van-nav-bar title="pdf预览" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <PDFView :pdfUrl="filePath"/>
    <div class="menu">
      <van-field
          class="field"
          v-model="value1"
          placeholder="写评论..."
      />
      <div class="box">
        <div class="zan">
          <van-icon name="good-job-o" size="8" color="#4f4f4f"/>
          <div>0</div>
        </div>
        <div class="zan">
          <van-icon name="eye-o" size="8" color="#4f4f4f"/>
          <div>0</div>
        </div>
        <div class="zan2">
          <van-icon name="chat-o" size="8" color="#4f4f4f"/>
          <div>0</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {reactive, toRefs} from "vue"
import {useRouter, useRoute} from "vue-router"
import PDFView from "@/components/pdfPreview.vue"
// import jsPdf from "./Javascript.pdf"
export default {
  components: {
    PDFView,
  },
  setup() {

    let filePath = useRoute().params.filePath;
    const type = useRoute().params.type;

    const state = reactive({
      value1: "",
      numPages: 0,
      src: '',
      vuePdf: null,
      source: ''
    })
    const router = useRouter();
    const onClickLeft = () => router.push({name: 'micro-list', params: {type: type}})
    // const onClickLeft = () => history.back()
    return {
      ...toRefs(state),
      onClickLeft,
      filePath
    }
  }
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  .menu {
    height: 60px;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;

    .field {
      margin: 10px;
      width: 40%;
      height: 40px;
      border: 1px solid #dedede;
      border-radius: 20px;
    }

    .box {
      display: flex;
      align-items: center;

      .zan {
        margin: 10px;
        border-right: 1px solid #dedede;
      }

      .zan2 {
        margin: 10px;
      }

      div {
        display: flex;
        align-items: center;
        font-size: 10px;
        color: #4f4f4f;
        margin-left: 10px;
        margin-right: 10px;
      }

    }
  }
}


</style>